import { DefaultFooter } from "@ant-design/pro-components"
import { useModel } from "@umijs/max"
import React, { useEffect, useLayoutEffect, useRef, useState } from "react"

const Footer: React.FC = () => {
  const [currentTime, setCurrentTime] = useState<string>("")
  const { createWebSocket } = useModel("websocketModel")
  const isWebsocketCreated = useRef(false)
  const daysOfWeek = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  ]
  useEffect(() => {
    const updateTime = () => {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const date = now.getDate()
      const day = now.getDay()
      const weekDay = daysOfWeek[day]
      const formatTime = `${year}年${month}月${date}日 ${now.toLocaleTimeString()} ${weekDay}`
      setCurrentTime(formatTime)
      if (!isWebsocketCreated.current) {
        console.log("in FooterUseEffect()")
        createWebSocket()
        isWebsocketCreated.current = true // 标记Websocket已经创建
      }
    }

    updateTime()

    // 每秒更新一次
    const interval = setInterval(() => {
      updateTime()
    }, 1000)

    return () => {
      clearInterval(interval)
    } // 组件卸载的时候清除定时器
  }, [])

  return (
    <DefaultFooter
      style={{
        background: "none"
      }}
      copyright={`V2025.1 恒鼎智能装备有限公司  ${currentTime}`}
    />
  )
}

export default Footer
